{extend name="../builder/layout"}
{block name="style"}
<style type="text/css">
    /*html,body{height: 100%;}*/
    .layui-iconpicker-body{width: 324px;}
    #LAY-system-view-popup{padding: 0;}
    .img-card{background: #FFF;padding-left: 10px;position: relative}
    .img-header{border-bottom: 1px solid #f6f6f6;padding-bottom: 5px;height: 50px;line-height: 50px;}
    .img_list{overflow-y:auto;}
    .img_list li{float:left;margin:7px;border:2px solid #fff;position: relative;width: 100px;height: 114px;overflow: hidden;box-shadow: 2px 2px 6px #f1f1f1;}
    .img_list li.current{border:2px solid #ff0000;}
    .img_list img{width:100px;height: 100px;object-fit: contain;}
    .img_list li p{color: #999;font-size: 12px;text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 100px;}
    .img_list li .badge{width: 20px;height: 20px;line-height: 20px;background: #ff0000;color: #fff;border-radius: 30px;text-align: center;
    font-size: 14px;position: absolute;right: 10px;top: 10px;border:1px solid #fff;}
    .img-footer{position: fixed;left: 0;bottom:0;width:calc(100% - 230px);height: 50px;background: #fff;margin-left: 190px;padding: 0 10px;}
    .show{display: block}
    .hidden{display: none}
    .layui-side-scroll{padding:0 10px;}
    .layui-side-scroll ul{font-size: 12px;}
    .layui-side-scroll ul li{padding:5px 0;color: #555;}
    .layui-side-scroll ul li .arrow,.layui-side-scroll ul li .arrow_empty{display: inline-block;width: 20px;height: 20px;}
    .layui-side-scroll ul li .title{display: inline-block;padding:5px 0;width: 150px;}
    .layui-side-scroll ul li .title .t{display: inline-block;width: 125px;}
    .layui-side-scroll ul li .title .t.on{color: #1E9FFF}
    .layui-side-scroll ul li .title:hover{background: #f4f4f4;}
    .layui-side-scroll ul li .nav{float: right}
    .son{margin-left: 23px;display: none;transition: all 0.3s;}
    /*.son .title{width: 120px;}*/
    .custom-drop .layui-menu li{font-size: 12px;line-height: 20px;}
</style>
{/block}
{block name="body"}
<div class="layui-side" style="background: #fff;width: 200px;border-right: 1 1px solid #f6f6f6; ">
    <div class="layui-side-scroll" style="width: 180px;">
        <div style="height: 10px;"></div>
        <ul id="cate">
<!--            <li>-->
<!--                <span class="arrow_empty"></span>-->
<!--                <span class="title">-->
<!--                    <span class="t">全部图片</span>-->
<!--                    <span class="nav nav0" data-id="0" data-level="0"><i class="layui-icon layui-icon-more"></i></span>-->
<!--                </span>-->
<!--            </li>-->
<!--            {volist name="cate_list" id="vo"}-->
<!--            <li>-->
<!--                {notempty name="vo.childlist"}-->
<!--                <span class="arrow"><i class="layui-icon layui-icon-triangle-r"></i></span>-->
<!--                {else/}-->
<!--                <span class="arrow_empty"></span>-->
<!--                {/notempty}-->
<!--                <span class="title">-->
<!--                    <span class="t">{$vo.name}</span>-->
<!--                    <span class="nav nav{$vo.id}" data-id="{$vo.id}"  data-level="1"><i class="layui-icon layui-icon-more"></i></span>-->
<!--                </span>-->
<!--                {notempty name="vo.childlist"}-->
<!--                <ul class="son">-->
<!--                    {volist name="vo.childlist" id="vo2"}-->
<!--                    <span class="title">-->
<!--                        <span class="t">{$vo2.spacer|raw}{$vo2.name}</span>-->
<!--                        <span class="nav nav{$vo2.id}" data-id="{$vo2.id}" data-level="2"><i class="layui-icon layui-icon-more"></i></span>-->
<!--                    </span>-->
<!--                    {/volist}-->
<!--                </ul>-->
<!--                {/notempty}-->
<!--            </li>-->
<!--            {/volist}-->


        </ul>
    </div>
</div>
<div class="layui-body" style="padding-left: 10px;left: 200px;position: absolute;">
    <!-- 内容主体区域 -->
    <div style="margin:0;height: 100%;background: #fff;">
        <div class="layui-fluid" style="padding:0;">
            <div class="img-card">
                <div class="img-header">
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="upload">
                        <i class="layui-icon layui-icon-upload-drag" style="font-size: 13px;"></i>上传图片
                    </button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" id="delete">
                        <i class="layui-icon layui-icon-delete" style="font-size: 13px;"></i>删除图片
                    </button>
                </div>
                <div class="img-body">
                    <div style="padding:10px 0;">
                        <ul class="img_list" id="img_list"></ul>
                    </div>
                </div>
                <div class="img-footer">
                    <div id="pages" style="float:left;"></div>
                    <div style="float: right;line-height: 50px">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="used">
                            使用选中的图片
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{/block}

{block name="script"}
<script id="cateX" type="text/html">
    <ul>
        <li>
            <span class="arrow_empty"></span>
            <span class="title">
                    <span class="t">全部图片</span>
                    <span class="nav nav0" data-id="0" data-level="0"><i class="layui-icon layui-icon-more"></i></span>
                </span>
        </li>
        {{#  layui.each(d, function(index, item){ }}
        <li>
            {{# if(item.childlist.length>0){ }}
            <span class="arrow"><i class="layui-icon layui-icon-triangle-r"></i></span>
            {{# }else{ }}
            <span class="arrow_empty"></span>
            {{# } }}
            <span class="title">
                <span class="t">{{ item.name }}</span>
                <span class="nav nav{{ item.id }}" data-id="{{ item.id }}"  data-level="1"><i class="layui-icon layui-icon-more"></i></span>
            </span>
            {{# if(item.childlist.length>0){ }}
            <ul class="son">
                {{#  layui.each(item.childlist, function(index2, item2){ }}
                <span class="title">
                    <span class="t">{{ item2.spacer }} {{ item2.name }}</span>
                    <span class="nav nav{{ item2.id }}" data-id="{{ item2.id }}" data-level="2"><i class="layui-icon layui-icon-more"></i></span>
                </span>
                {{#  }); }}
            </ul>
            {{# } }}
        </li>
        {{#  }); }}
    </ul>
</script>
<script type="text/javascript">
    var field_name = '{$field_name}';
    var max = {$max};
    var cate = 0;
    var ids = [];//选中的id
    var paths = [];//选中的路径
    layui.extend({
        index: 'lib/index' //主入口模块
    }).use(['index','tree','laypage','dropdown','laytpl','upload'], function(){
        var $ = layui.$,
            admin = layui.admin,
            tree = layui.tree,
            laypage = layui.laypage,
            dropdown = layui.dropdown,
            upload = layui.upload,
            laytpl = layui.laytpl;

        //间距
        var popup_index = parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引
        if (popup_index) {
            // $('.layui-fluid').css('padding',0);
            // $('html').css('background','#fff');
        }

        //计算分页数据及获取数据
        $('#img_list').height(window.frames.innerHeight - 110);
        var page_size = parseInt($('#img_list').height() / 132) * parseInt($('#img_list').width() / 118);
        // console.log(page_size,$('#img_list').width(),$('#img_list').height())
        var getList = function (p=1,cate_id=0){
            $.post('lists',{cate_id:cate_id,page:p,limit:page_size},function (re){
                var html = '';
                $.each(re.data.data,function (k,v){
                    html += '<li class="img_item" data-id="'+v.id+'" data-url="'+v.url+'">\n' +
                        '<img src="'+v.url+'" alt="'+v.url+'">\n' +
                        '<p>'+v.name+'</p>\n' +
                        '<div class="badge hidden"></div>\n' +
                        '</li>';
                })
                if(''==html){
                    html = '<p style="color: #999;text-align: center;margin-top:50px;">没有更多了</p>';
                }
                $('#img_list').html(html);
                var c = re.data.total;
                laypage.render({
                    elem: 'pages' //注意，这里的 test1 是 ID，不用加 # 号
                    ,count: c //数据总数，从服务端得到
                    ,curr:p
                    ,limit:page_size
                    ,groups:3
                    ,prev: '<i class="layui-icon"></i>'
                    ,next: '<i class="layui-icon"></i>'
                    ,jump: function(obj, first){
                        //首次不执行
                        if(!first){
                            getList(obj.curr);
                            ids = [];
                            paths = [];
                        }
                    }
                });
            });
        }
        getList();

        //选中
        $('.img-body').on('click','.img_item',function (){
            var t = $('.img_item.current').length;
            if($(this).hasClass('current')){
                var this_num = parseInt($(this).find('.badge').text());
                //取消
                $(this).find('.badge').text('').hide();
                $(this).removeClass('current');
                //改变角标
                $('.img_item.current .badge').each(function (k,v){
                    var n = parseInt($(this).text());
                    if (n>this_num){
                        $(this).text(n-1)
                    }
                })
            }else{
                //选中
                $(this).find('.badge').text(t+1).show();
                $(this).addClass('current');
            }
            //选中的图片的id
            var choose_id = $(this).data('id');
            var id_exist = $.inArray(choose_id, ids);
            if (id_exist >= 0){
                ids.splice(id_exist, 1);
            }else{
                ids.push(choose_id);
            }

            //选中的图片的路径
            var choose_path = $(this).data('url');
            var path_exist = $.inArray(choose_path, paths);
            if (path_exist >= 0){
                paths.splice(path_exist, 1);
            }else{
                paths.push(choose_path);
            }
            // console.log(ids,paths);
        })

        //使用选中图片
        $('#used').click(function () {
            if (ids.length <= 0){
                layer.msg('请选择图片');
                return false;
            }else if(ids.length>max){
                layer.msg('最多可选择'+max+'张图片');
                return false;
            }
            // console.log(ids,paths);
            //var index = parent.layer.getFrameIndex(window.name);
            //parent.layer.close(index);
            parent.window.callbackChooseImages && parent.window.callbackChooseImages(ids,paths);
        });


        //展开收起
        $('#cate').on('click','.arrow',function (){
            if($(this).next().next().is(':hidden')){
                $(this).html('<i class="layui-icon layui-icon-triangle-d"></i>');
            }else{
                $(this).html('<i class="layui-icon layui-icon-triangle-r"></i>');
            }
            $(this).next().next().toggle();
        });

        //获取分类
        var getCate = function (){
            $.post('cate',function (res){
                var getTpl = cateX.innerHTML
                    ,view = document.getElementById('cate');
                laytpl(getTpl).render(res.data, function(html){
                    view.innerHTML = html;
                });
            })
        }
        getCate();

        //菜单
        $('#cate').on('click','.nav',function (){
            var id = $(this).data('id');
            var level = $(this).data('level');
            var data = [];
            if (level==0){
                data = [
                    {
                        title: '添加分类'
                        ,id: 0
                        ,action:'add'
                    }
                ];
            }else if(level==1){
                data = [
                    {
                        title: '添加分类'
                        ,id: id
                        ,action:'add'
                    },
                    {
                        title: '编辑分类'
                        ,id: id
                        ,action:'edit'
                    },
                    {
                        title: '删除分类'
                        ,id: id
                        ,action:'del'
                    }
                ];
            }else if(level==2){
                data = [
                    {
                        title: '编辑分类'
                        ,id: id
                        ,action:'edit'
                    },
                    {
                        title: '删除分类'
                        ,id: id
                        ,action:'del'
                    }
                ];
            }
            dropdown.render({
                elem: '.nav'+id
                ,align:'right'
                ,style:'font-size:12px;'
                ,className:'custom-drop'
                ,show:true
                ,data:data
                ,click: function(data, othis){
                    var elem = $(this.elem)
                        ,listId = elem.data('id'); //表格列表的预埋数据
                    // layer.msg('操作：'+ data.action +'，id：'+ data.id);
                    if(data.action=='add' || data.action=='edit'){
                        var url = 'add?id='+id;
                        if (data.action=='edit'){
                            url = 'edit?id='+id;
                        }
                        layer.open({
                            type:2
                            ,title:'添加/编辑分类'
                            ,content:url
                            ,area:['60%','80%']
                        })
                    }else if(data.action=='del'){
                        var index = layer.confirm('确定要这么操作？',{title:"提示"}, function(index){
                            //console.log(obj)
                            layer.close(index);
                            admin.req({
                                url: 'delete'
                                ,data: {ids:data.id}
                                ,type:'post'
                                ,success: function(res){
                                    if (res.code==1) {
                                        layer.msg(res.msg);
                                        getCate();
                                    }else{
                                        // layer.msg(res.msg,{icon:2});
                                    }

                                }
                            });
                        });
                    }
                }
            });
        });

        //选中分类
        $('#cate').on('click','.t',function (){
            $('#cate .t').removeClass('on');
            $(this).addClass('on');
            var id = $(this).next().data('id');
            cate = id;
            getList(1,id);
        })

        //回调
        window.callbackForm = function (data,res){
            console.log(data,res)
            // location.reload();
            getCate();
        }

        //拖拽上传,多图
        upload.render({
            elem: '#upload'
            ,url: '{:url(\'/\'.get_admin_path().'/upload/image')}' //改成您自己的上传接口
            ,accept:'images'
            ,field:'image'
            ,acceptMime: 'image/*'
            ,multiple: true
            ,data:{cate_id:function (){return cate;}}
            ,done: function(res){
                if (res.code==1) {
                    // console.log(cate)
                    getList(1,cate);
                    layer.msg(res.msg,{icon:1});
                }else{
                    layer.msg(res.msg,{icon:2});
                }
            }
        });

        //删除图片
        $('#delete').click(function (){
            var index = layer.confirm('确定要这么操作？',{title:"提示"}, function(index){
                layer.close(index);
                admin.req({
                    url: '{:url(\'/\'.get_admin_path().'/cms/attach/delete')}'
                    ,data: {ids:ids}
                    ,type:'post'
                    ,success: function(res){
                        if (res.code==1) {
                            layer.msg(res.msg);
                            getList(1,cate);
                        }else{
                            // layer.msg(res.msg,{icon:2});
                        }

                    }
                });
            });
        });

})

</script>
{/block}
